<template>
<div style="width: 950px">
  <el-carousel style="width: 950px" :interval="4000" type="card" height="300px">
    <el-carousel-item v-for="item in bannerArr" :key="item.id">
      <img :src="serveUrl+item.url" alt="" width="100%" height="100%">
    </el-carousel-item>
  </el-carousel>

  <el-divider style="width: 950px"></el-divider>
  <h2>酒店排名</h2>
  <div style="margin: 25px 0px" :key="item.id" v-for="(item,i) in hotelArr">
    <el-row  style="height: 200px" :gutter="20">
      <el-col :span="8">
        <div  style="width: 100%;height: 200px;cursor: pointer">
          <el-image
              @click="searchHotelInfo(item.hotelId)"
              style="width: 100%; height: 100%"
              :src="serveUrl+item.url"
              fit="fill"></el-image>
        </div>
      </el-col>
      <el-col :span="16">
        <el-descriptions :column="2" :span="3" :title="item.hotelName">
          <el-descriptions-item  label="地址">{{item.location}}</el-descriptions-item>
          <el-descriptions-item label="类型">
            <el-tag size="small">{{item.type}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="评分">
            <el-rate
                v-model="item.avgScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
            </el-rate>
          </el-descriptions-item>
        </el-descriptions>
        <span style="font-size: 90px;font-family: 华文隶书;position: relative;left: 300px">NO.{{i+1}}</span>
      </el-col>
    </el-row>
    <el-divider></el-divider>
  </div>
</div>
</template>

<script>
export default {
  data(){
    return{
      bannerArr:[],
      hotelArr:[],
      serveUrl:'http://localhost:9580'
    }
  },
  methods:{
    searchHotelInfo(hotelId){
      this.$router.push('/page/book/BookHotel-HotelInfo');
      console.log(hotelId);
      localStorage.setItem('hotelId',hotelId);
    },
    loadBanners(){
      let url='http://localhost:9580/hotelIndexBanners/user/getUserHotelIndexBannerList';
      console.log('url'+url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.bannerArr = responseBody.data;
      });
    },
    loadHotelList() {
      let url='http://localhost:9580/hotelIndexBanners/user/getHotelOrderCountList';

      console.log('url'+url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.hotelArr = responseBody.data;
        console.log(this.hotelArr);
      });
    }
  },
  mounted() {
    this.loadBanners();
    this.loadHotelList();
  }
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.head {
  color: #333;
  text-align: center;
  line-height: 60px;
  box-sizing: border-box;
}

.head1 {
  margin-top: 100px;
  padding-left: 0px;
  width: 950px;
}

.el-main {
  color: #333;
  height: 100%;
  padding-left: 450px;
  box-sizing: border-box;
}

.el-menu-demo {
  width: 100%;
  margin: 0 auto;
  padding-left: 350px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.head-r-l a {
  text-decoration: none;
}

.el-row {
  margin-bottom: 20px;
}

:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {

}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

h2 {
  margin: 0;
  font-size: 20px;
}

.span-s {
  font-size: 15px;
}

.hotel-live {
  text-align: center;
  width: 950px;
  margin-top: 50px;
}

.el-tabs-s {
  width: 950px;
  box-sizing: border-box;
}

.monitorTop {
  /*!/ position: relative;  相对定位,*/
  position: relative;
  /*vw是width of view(port)的缩写；
100vw表示百分之百的视图宽度；
123px是需要减去的宽度；
减号的两边必须都有至少一个空格*/
  height: calc(50% - 123px);
}

.monitorTop .el-tabs__item {
  font-size: 20px !important;
}

::v-deep .el-tabs__nav-scroll {
  width: 50%;
  margin: 0 auto
}
.img-s{
  width: 303px;
  height: 220px;
  margin-bottom: 15px;
  cursor: pointer;
}
.foot-s{
  background-color: #3e3e3e;
  height: 300px;
  text-align: center;
  color: #bbbbbb;
}
.b1{
  height: 60px;
  font-size: 15px;
}
.span-text{
  z-index: 3;
  position: relative;
  color: white;
  font-size: 25px;
  top: -125px;
  left: 110px;
}
.span-hotel{
  z-index: 3;
  position: relative;
  color: white;
  font-size: 15px;
  top: -35px;
  left: 10px;
}
</style>